.my-container{
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-image: url("bg.jpg");
    background-size: 100% 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.my-avatar{
    flex:none;
    margin-top:10%;
    width:50%;
}
.my-avatar>img{
    width:100%;
}
.my-title{
    margin-top:5%;
    font-size:40px;
    font-weight: bold;
    color:#EEE;
}

.my-form{
    margin-top:10%;
    width:85%;
    flex:auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    /*background-color: azure;*/
}

.my-input{

    margin:5px 0;
    height:40px;
    width:100%;
    border-radius:5px;

    /*background-color: azure;*/

    display:flex;

    position: relative;

    transition: height 0.5s,box-shadow 0.5s;

}

.my-input>input{

    flex:auto;
    border:none;
    outline:none;
    border-radius: 5px;

    font-size: 16px;
    font-weight: bold;
    color:#28E;


    min-width: 35px;
    padding-left:70px;
}

.my-yzm{
    height:100%;
    margin-left:5px;
    border-radius: 5px;
}

.my-label{
    position: absolute;
    left:0;
    top:0;

    line-height: 40px;
    color:#999;
    padding-left:5px;

    transition: line-height 0.5s;

}

.my-input:focus-within{
    box-shadow: 0 0 10px 3px #CFD;
    height:50px;
}

.my-input:focus-within>label{
    line-height:50px;
}

.my-button{
    margin-top:5%;
    height:50px;
    width:100%;

    border:none;

    background-color: #0BF;
    color:white;
    font-size: 20px;
    font-weight:bold;
    border-radius: 5px;

}
.my-button:active{
    box-shadow: 0 0 20px 6px #4BF;
}

.my-bottom{
    color:#5CF;
    font-size:14px;
    padding-bottom:10px;
}



